<template>
  <div
          style=";position: relative;height: 100%;width: 100%;padding-left: 10px;">

    <div style="display: flex;height: 100%;width: 100%;background-color: #ffffff;border-top-left-radius: 8px;color: #ffffff;border: 1px solid #e1e1e1;">
      <div style="width: 100%;position: relative;">

        <div style="position: absolute;height: 100%;width: 100%;padding-top: 42px;padding-bottom: 113px;top: 0;">
          <div class="message-content" style="height: 100%;width: 100%;overflow: hidden">
            <div class="list">
              <div>
                <div v-if="messages.length>0 && canLoadMore == 1" @click="loadMore"
                     style="text-align: center;font-size: 12px;color: #9e9e9e;padding: 6px;background-color: #f9f9f9;">
                  点击加载更多
                </div>
                <div v-if="canLoadMore == 2"
                     style="text-align: center;font-size: 12px;color: #9e9e9e;padding: 6px;background-color: #f9f9f9;">
                  <i
                          class="fa fa-refresh fa-spin fa-fw"></i>正在加载
                </div>
              </div>
              <template v-for="(message,index) of messages">
                <template v-if="message.type == 999">
                  <div class="message system">
                    <div v-html="message.content" class="text"></div>
                  </div>
                </template>
                <template v-else>
                  <div :class="message.reciver != conversation.supportUserEntity.messageId?'mine':'other'"
                       class="message time"
                       v-bind:time="new Date(message.createTime).format('yyyy-MM-dd hh:mm:ss')">
                    <img v-if="message.reciver == conversation.supportUserEntity.messageId"
                         :src="conversation.userEntity.avatar"
                         onerror="this.src='/imgs/default.png'"
                         class="avatar"/>
                    <div class="text" v-if="message.type == 1">{{message.content}}</div>
                    <div class="text" v-if="message.type == 2"><img :browser="message.content"
                                                                    :src="message.content+'?imageView2/0/h/300'"
                                                                    @click="showPrototypeImage($event)"
                                                                    style="max-height: 300px;">
                    </div>

                    <template v-if="message.type >= 1008">
                      <div class="text">
                        <component :content="message.content"
                                   v-bind:is="'A'+message.type"></component>
                      </div>
                    </template>
                    <img v-if="message.reciver != conversation.supportUserEntity.messageId"
                         :src="conversation.supportUserEntity.avatar"
                         onerror="this.src='/imgs/default.png'"
                         class="avatar"/>
                  </div>
                </template>
              </template>
            </div>
          </div>
        </div>

        <div v-if="disabled"
             style="position: absolute;border-top-left-radius: 8px; font-size: 12px; line-height: 24px; padding: 8px; display: flex; background-color: rgb(19, 117, 140);width: 100%;z-index: 0;">
          <span>与 [{{conversation.userEntity.nickName}}] 的会话</span>
        </div>
        <div v-else
             style="position: absolute;border-top-left-radius: 8px; font-size: 12px; line-height: 24px; padding: 8px; display: flex; background-color: rgb(19, 117, 140);width: 100%;z-index: 0;">
          <span>与 [{{conversation.userEntity.nickName}}] 会话中</span>
        </div>
        <div v-if="disabled"
             style="position: absolute;bottom: 0;width: 100%;background-color: #efefef;cursor: not-allowed;">
          <div style="border-top:1px solid #e1e1e1;padding: 4px 8px;">
            <i class="iconfont icon-tupian" style="color: #656565"></i>
            <i class="iconfont icon-lianjie1" style="color: #656565;margin-left: 8px;"></i>
          </div>
          <div style="padding: 4px 8px;">
            <div contenteditable="false"
                 style="font-size:12px;color: #000;height: 32px;line-height:16px;overflow-y: auto;outline: none;"></div>
            <div style="margin-top: 8px;text-align: right">
              <button class="btn btn-info" disabled>发送</button>
            </div>
          </div>
        </div>
        <div v-else style="position: absolute;bottom: 0;width: 100%;">
          <div class="quickReply" v-if="showQuickReply && quickReply.length > 0" tabindex="-1" v-focus
               @blur="showQuickReply = false">
            <div class="item333"
                 style="overflow: hidden;height: 100%;width: 100%;position: relative;display: block;">
              <div v-for="(text,index) in quickReply"
                   style="color: #ffffff;margin: 8px 0;cursor: pointer;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;"
                   @click.stop="sendTo(text)">
                <span style="font-weight: 900;">{{index+1}}. </span>{{text}}
              </div>
            </div>
          </div>
          <div style="border-top:1px solid #e1e1e1;padding: 4px 8px;">
            <i class="iconfont icon-tupian" id="image-sender" style="color: #656565;cursor: pointer;"></i>
            <i class="iconfont icon-lianjie1" v-if="customStat"
               style="color: #656565;cursor: pointer;margin-left: 8px;"
               @click="showCustomIframe = !showCustomIframe"></i>
          </div>
          <div style="padding: 4px 8px;">
            <div @keydown.13="send($event)" contenteditable="true" id="content" ref="textContent"
                 style="font-size:12px;color: #000;height: 32px;line-height:16px;overflow-y: auto;outline: none;"></div>
            <div style="margin-top: 8px;text-align: right">
              <button class="btn btn-info" @click="send">发送</button>
            </div>
          </div>
        </div>
      </div>

      <div style="border-left: 1px solid #d3d3d3;" v-if="showCustomIframe">

        <iframe width="300px" height="100%" frameborder="no" marginheight="0" marginwidth="0" scrolling=no
                :src="customUrl"
                style="top: 0;right: 0;"></iframe>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        data(){
            return {
                canLoadMore: 1,
                messages: [],
                quickReply: [],
                showQuickReply: false,
                showCustomIframe: false,
                customUrl: '',
                customStat: false
            };
        }, directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        props: ["conversation", "disabled"],
        methods: {
            send: function () {
                const content = $('#content').text();
                if (content.length == 0) {
                    this.showQuickReply = true;
                    return;
                }
                $('#content').empty();
                this.sendTo(content);
            },
            sendTo: function (content, type) {
                const reciver = this.conversation.userEntity.messageId;
                const message = this.as.send(null, content, reciver, type);
                this.messages.push(message);
                $('.message-content').mCustomScrollbar('scrollTo', 'last');
                this.showQuickReply = false;
            },
            loadMore: function () {
                this.canLoadMore = 2;
                const createTime = new Date(this.messages[0].createTime).format('yyyy-MM-dd hh:mm:ss.S');

                const oldHeight = $('.message-content .list').scroll().height();
                setTimeout(function () {
                    const messages = this.as.messages(this.conversation.supportUserEntity.messageId, this.conversation.userEntity.messageId, null, createTime).reverse();
                    if (messages.length > 0) {
                        this.messages = messages.concat(this.messages);
                        this.$nextTick(function () {
                            const newHeight = $('.message-content .list').scroll().height();
                            $('.message-content .list').parent().css('top', newHeight - oldHeight);
                        });
                        this.canLoadMore = 3;
                    } else {
                        this.canLoadMore = 4;
                    }
                }.bind(this));
            },
            findMessage: function () {
                const conversation = this.conversation;
                this.canLoadMore = 1;
                const that = this;
                setTimeout(function () {
                    that.messages = that.as.messages(conversation.supportUserEntity.messageId, conversation.userEntity.messageId).reverse();
                    $('#image-sender').QiniuUpload({
                        key: 'athena-support',
                        callback: function (evt, result) {
                            var url = that.as.getImageUrl() + result.key;
                            that.sendTo(url, 2);
                        }
                    }, '/upload/token?bucket=athena-support&key=');
                    var scrollHeight = $('.message-content .list').scroll().height();
                    if (that.create) {
                        $(".message-content").mCustomScrollbar('update');
                    } else {
                        that.create = true;
                        $(".message-content").mCustomScrollbar({
                            mouseWheel: {preventDefault: true},
                            autoHideScrollbar: true,
                            theme: "minimal-dark",
                            callbacks: {
                                onTotalScrollBack: function () {
                                    if (that.canLoadMore == 3) {
                                        that.loadMore();
                                    }
                                }
                            }
                        });
                    }

                    that.$nextTick(function () {
                        $('.message-content').mCustomScrollbar("scrollTo", "bottom", {
                            scrollInertia: 0
                        });
                    });
                }, 0);
            },
            showPrototypeImage: function (event) {
                $(event.target).browser();
            }
        },
        mounted: function () {

            const that = this;
            if (!that.disabled) {
                $.post('/setting/base/quickreply', {}, function (result) {
                    that.quickReply = result;
                });
                $.post('/setting/advance/find', {key: 'CUSTOM_MESSAGE'}, function (result) {
                    if (result && result.value) {
                        let value = result.value;
                        value = JSON.parse(value);
                        that.customUrl = value.config;
                        that.customStat = (value.stat == 1);
                    }
                });
            }

            let userAvatar = that.conversation.userEntity.avatar;
            let supportAvatar = that.conversation.supportUserEntity.avatar;
            if(userAvatar == null || userAvatar.length == 0){
                that.conversation.userEntity.avatar = '/imgs/default.png'
            }
            if(supportAvatar == null || supportAvatar.length == 0){
                that.conversation.supportUserEntity.avatar = '/imgs/default.png'
            }
            this.findMessage();
            this.as.setPageCustomMessageListener(function (type, content) {
                that.sendTo(content, type);
                that.showCustomIframe = false;
            });
            this.as.setPageMessageCallback(function (object) {
                let notification = document.hidden;
                if (!notification && object.type != 998) {
                    if (that.conversation && !that.disabled) {
                        that.$emit('findCount',object.sender);
                        if (object.sender == that.conversation.userEntity.messageId) {
                            that.messages.push(object);
                            $('.message-content').mCustomScrollbar('scrollTo', 'last');
                            that.as.read(object.id);
                        } else if (object.sender == that.conversation.supportUserEntity.messageId && object.reciver == that.conversation.userEntity.messageId) {
                            //当前窗口回调消息
                            that.messages.push(object);
                            $('.message-content').mCustomScrollbar('scrollTo', 'last');
                            that.as.read(object.id);
                        } else {
                            notification = true;
                        }
                    } else {
                        notification = true;
                    }
                }
                return notification;
            });
        },
        watch: {
            'conversation.userEntity': function (conversation) {
                this.findMessage();
            }
        }
    }
</script>
<style scoped>
  .quickReply {
    top: -120px;
    position: absolute;
    padding: 0 8px;
    background: #5bc0de;
    z-index: 1;
    border-radius: 4px;
    outline: none;
    right: 10px;
    height: 180px;
    width: 280px;
  }

  .quickReply:after {
    font-family: FontAwesome;
    content: "\f0d7";
    color: #5bc0de;
    position: absolute;
    font-size: 20px;
    bottom: -16px;
    right: 16px;
  }
</style>